<template>
  <div class="login-container">
    <div class="login-box">
      <!-- ref必须属实，后期方便el-form组件获取使用 -->
      <!-- model必须属实，与v-model没关系，对表单全部数据进行绑定，后期表单验证会用到 -->
      <el-form ref="loginFormRef" :model="loginForm" :rules="loginFormRules">
        <img src="./logo_index.png" alt />
        <!-- el-form-item：表单项目组件，每个表单域都要通过 -->
        <!-- label：表单名称 -->
        <!-- prop:使得校验规则与当前项目联系起来，注意：属性值必须是表单对象成员名称 -->
        <el-form-item prop="mobile">
          <!-- 普通输入框 -->
          <!-- v-model在el-input中是必须属性 -->
          <el-input v-model="loginForm.mobile" placeholder="请输入手机号码">
            <span class="iconfont icon-.icon-ic_perm_phone_msg_px"></span>
          </el-input>
        </el-form-item>
        <!-- 验证码输入框 -->
        <el-form-item prop="code">
          <el-input v-model="loginForm.code" placeholder="请输入验证码">
            <span class="iconfont icon-.icon-ic_thumbs_up_down_px"></span>
          </el-input>
        </el-form-item>
        <!-- 复选框，协议 -->
        <el-form-item style="text-align:left;" prop="xieyi">
          <el-checkbox v-model="loginForm.xieyi" style="margin-right:10px;"></el-checkbox>
          <span>我已阅读并同意用户协议和隐私条款</span>
        </el-form-item>
        <!-- 登录按钮 -->
        <el-form-item>
          <el-button
            type="primary"
            :loading="isActive"
            :disabled="isActive"
            style="width:100%;"
            @click="login()"
          >登录</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import '@/assets/iconfont/gt.js'
import '@/assets/iconfont/xtb/iconfont.css'
export default {
  data () {
    var xieyiTest = function (rule, value, callback) {
      value ? callback() : callback(new Error('请勾选协议。'))
    }
    return {
      isActive: false,
      ctaObj: null,
      loginForm: {
        mobile: '13999999999', // 手机号码
        code: '246810', // 验证码
        xieyi: true
      },
      loginFormRules: {
        mobile: [
          { required: true, message: '手机号码必须填写' },
          { pattern: /^1[35789]\d{9}$/, message: '请填写正确的手机号码' }
        ],
        code: [{ required: true, message: '验证码必须填写' }],
        xieyi: [{ validator: xieyiTest }]
      }
    }
  },
  methods: {
    login () {
      this.$refs.loginFormRef.validate(valid => {
        // 表单域校验成功
        if (valid) {
          if (this.ctaObj !== null) {
            return this.ctaObj.verify()
          }
          // 注意：按钮等待 要在 之后设置
          this.isActive = true
          // A. axios获得极验请求秘钥信息
          let pro = this.$http.get(`/captchas/${this.loginForm.mobile}`)
          pro
            .then(result => {
              // 接收处理返回的极验请求秘钥信息
              let { data } = result.data
              // 显示极验应用窗口
              // 请检测data的数据结构， 保证data.gt, data.challenge, data.success有值
              window.initGeetest(
                {
                  // 以下配置参数来自服务端 SDK
                  gt: data.gt,
                  challenge: data.challenge,
                  offline: !data.success,
                  new_captcha: true,
                  product: 'bind' // 没有按钮，通过登录按钮激活验证
                },
                captchaObj => {
                  // 这里可以调用验证实例 captchaObj 的实例方法
                  captchaObj
                    .onReady(() => {
                      // 验证码ready之后才能调用verify方法显示验证码
                      captchaObj.verify() // 显示验证码窗口
                      this.ctaObj = captchaObj
                      this.isActive = false
                    })
                    .onSuccess(() => {
                      // your code
                      // B. 校验账号真实性，登录
                      this.loginAct()
                    })
                    .onError(() => {
                      // your code
                    })
                }
              )
            })
            .catch(err => {
              return this.$message.error('获得极验初始校验信息错误：' + err)
            })

          // B. 账号真实校验，登录后台
          // this.loginAct()
        }
      })
    },
    loginAct () {
      var pro = this.$http.post('/authorizations', this.loginForm)
      pro
        .then(result => {
          if (result.data.message === 'OK') {
            // 进入后台系统
            window.sessionStorage.setItem(
              'userinfo',
              JSON.stringify(result.data.data)
            )
            this.$router.push('/home')
          }
        })
        .catch(err => {
          return this.$message({
            type: 'error',
            message: '用户名或密码错误' + err,
            duration: 1000
          })
        })
    }
  }
}
</script>

<style lang="less" scoped>
.login-container {
  width: 100%;
  height: 100%;
  background-color: gray;
  background-image: url("./天空 云 阳光 黑暗 4K风景壁纸_彼岸图网.jpg");
  background-size: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  .login-box {
    width: 400px;
    height: 340px;
    display: flex;
    justify-content: center;
    align-items: center;
    // <el-form>      -----编译---->  <form class="el-form">
    .el-form {
      width: 75%;
      text-align: center;
      img {
        width: 50%;
        margin: 20px auto;
      }
    }
  }
}
</style>
